<template>
  <!-- 水位时，日变化图报表 -->
  <div class="hourdata">
    <div class="search">
      <div class="change_type">
        <span
          class="water_hour"
          :class="curr==='hour'?'cur':''"
          @click="getlevelData('hour')"
        >水位小时变化</span>
        <span class="water_day" :class="curr==='day'?'cur':''" @click="getlevelData('day')">水位日变化</span>
      </div>
      <div class="time_name">时间选择：</div>
      <el-form :inline="true" :model="search">
        <el-form-item>
          <el-date-picker
            v-if="curr==='day'"
            v-model="search.daytime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
          <el-date-picker
            v-if="curr==='hour'"
            v-model="search.hourtime"
            type="datetime"
            placeholder="选择时间"
            value-format="yyyy-MM-dd HH"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button style="backgroundColor:#4E72C8;color:#fff" @click="getAddBook(curr)">查询</el-button>
          <el-button @click="empty(curr)" type="info">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-if="curr==='day'" id="ehart1" ref="ehart1" :style="{width: '100%', height: '480px'}"></div>
    <div v-if="curr==='hour'" id="ehart2" ref="ehart2" :style="{width: '100%', height: '480px'}"></div>
  </div>
</template>
<script>
import { getTimeHourMinutes, getTimeSeconds } from "../../../utils/myMethod";

export default {
  data() {
    return {
      search: {
        hourtime: getTimeHourMinutes(new Date()), //时时间
        daytime: getTimeSeconds(new Date()) // 日时间
      },
      curr: "day",
      data: {
        pagesize: 15,
        currpage: 1,
        list: []
      },
      // 日变化图数据
      dataX: [],
      dataY: [],
      Allnames: [],
      dataMsgs: [],
      count: [],
      end: 40,
      // 时变化图数据
      dataX2: [],
      dataY2: [],
      Allnames2: [],
      dataMsgs2: []
    };
  },
  created() {
    //日数据接口
    this.getList().then(res => {
      this.drawLine(res);
    });
    // 时数据接口
    // this.getList2().then(res => {
    //   this.drawLine2(res);
    // });
  },
  methods: {
    getlevelData(type) {
      this.curr = type;

      if (type === "day") {
        this.getList().then(res => {
          this.drawLine(res);
        });
      }
      if (type === "hour") {
        this.getList2().then(res => {
          this.drawLine2(res);
        });
      }
    },

    //获取日列表数据
    getList() {
      let that = this;
      let time = that.search.daytime;

      return new Promise(function(resolve, reject) {
        that.$http
          .post("dataMsg/getAllWaterDetail", {
            time,
            dateType: "day"
          })
          .then(res => {
            if (res.data.length == 0) {
              that.$message({
                message: "该时间设备暂无数据,请选择其他时间查询",
                type: "warning",
                center: true
              });
              return;
            }
            let Allnames = [];

            let dataMsgs = [];

            let count = 0;
            let list = [];
            res.data.forEach(data => {
              Allnames.push(data.stationName);
              let msg = {
                name: "",
                codes: [],
                times: [],
                levels: []
              };
              msg.name = data.stationName;
              let len = data.dataMsgs.length;
              for (let i = 1; i <= len; i++) {
                if (data.dataMsgs[i] != undefined) {
                  msg.codes.push(data.dataMsgs[i].code);
                  msg.times.push(data.dataMsgs[i].createTime);
                  msg.levels.push(data.dataMsgs[i].waterLevel);

                  if (i == data.dataMsgs.length - 1) {
                    // msg.codes = msg.codes.slice(len - 200, len);
                    // msg.times = msg.times.slice(len - 200, len);
                    // msg.levels = msg.levels.slice(len - 200, len);
                    if (count < msg.codes.length) {
                      count = msg.codes.length;
                    }
                    dataMsgs.push(msg);
                  }
                }
              }
            });
            for (let i = 1; i <= count; i++) {
              list.push(i);
            }
            that.count = list;
            if (count > 1000) {
              that.end = 5;
            } else if (count > 100 && count < 1000) {
              that.end = 10;
            } else {
              that.end = 40;
            }

            // console.log(that.count);

            that.Allnames = Allnames;
            that.dataMsgs = dataMsgs;
            resolve({ Allnames, dataMsgs });
          });
      });
    },
    //生成日数据图表
    drawLine(datas) {
      let myChart = this.$Echarts.init(document.getElementById("ehart1"));
      let series = [];
      let length = datas.dataMsgs.length;

      for (var i = 0; i < length; i++) {
        series.push({
          name: datas.dataMsgs[i].name,
          type: "line",
          // stack: "总量",
          time: datas.dataMsgs[i].times,
          data: datas.dataMsgs[i].levels
        });
      }

      // console.log("mini-4", series);

      let option = {
        title: {
          text: "水位日变化图（单位:CM）"
        },
        tooltip: {
          trigger: "item",
          // trigger: "axis",
          position: "bottom",
          textStyle: {
            align: "left"
          },

          formatter: function(params) {
            let station = {};
            option.series.forEach(item => {
              console.log(item);
              if (item.name == params.seriesName) {
                station = item;
                return;
              }
            });
            var res = "<div><p>" + params.seriesName + "</p></div>";

            res += "<div><p>当前水位:" + params.data + "CM</p></div>";
            res +=
              "<div><p>更新时间:" +
              station.time[params.dataIndex] +
              "</p><div>";
            return res;
          }
        },

        legend: {
          x: "300px",
          y: "0px",
          data: datas.Allnames
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "3%",
          containLabel: true
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.count,
          show: false,
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#DFE3E9", // x轴颜色
              width: 1 // 粗细
            }
          },
          axisLabel: {
            color: "#999999", // x轴刻度名称颜色
            interval: 0, //代表显示所有x轴标签显示
            rotate: 45 //代表逆时针旋转45度
          }
        },
        yAxis: {
          type: "value",
          splitNumber: 30,
          axisLabel: {
            color: "#999999", // y轴刻度名称颜色
            formatter: function(value) {
              var value;

              if (value >= 1000) {
                value = value / 1000 + "K";
              } else if (value < 1000) {
                value = value;
              }

              return value;
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed"
            }
          },
          axisTick: {
            //y轴刻度线
            show: false
          },
          axisLine: {
            //y轴
            show: false
          }
        },
        series: series,
        dataZoom: [
          {
            type: "slider",
            xAxisIndex: 0,
            filterMode: "empty",
            start: 0, //数据窗口范围的起始百分比,表示30%
            end: this.end
          }
        ]
      };
      myChart.setOption(option, true);
    },

    // 获取时列表数据
    getList2() {
      let that = this;
      let time = that.search.hourtime + ":00:00";
      return new Promise(function(resolve, reject) {
        that.$http
          .post("dataMsg/getAllWaterDetail", {
            time,
            dateType: "hour",
            companyId: localStorage.getItem("companyId")
          })
          .then(res => {
            if (res.data.length == 0) {
              that.$message({
                message: "该小时设备暂无数据,请选择其他时间查询",
                type: "warning",
                center: true
              });
              return;
            }
            console.log("asdas", res);
            let Allnames2 = [];
            let dataMsgs2 = [];
            res.data.forEach(data => {
              Allnames2.push(data.stationName);
              let msg = {
                name: "",
                codes: [],
                times: [],
                levels: []
              };
              msg.name = data.stationName;
              let len = data.dataMsgs.length;
              for (var i = 0; i < len; i++) {
                if (data.dataMsgs[i] != undefined) {
                  msg.codes.push(data.dataMsgs[i].code);
                  msg.times.push(data.dataMsgs[i].createTime);
                  msg.levels.push(data.dataMsgs[i].waterLevel);

                  if (i == data.dataMsgs.length - 1) {
                    msg.codes = msg.codes.slice(len - 240, len);
                    msg.times = msg.times.slice(len - 240, len);
                    msg.levels = msg.levels.slice(len - 240, len);
                    dataMsgs.push(msg);
                  }
                }
              }
            });
            that.Allnames2 = Allnames2;
            that.dataMsgs2 = dataMsgs2;
            resolve({ Allnames2, dataMsgs2 });
          });
      });
    },
    // 生成时间数据图表
    drawLine2(datas) {
      console.log("98k", datas);
      let myChart = this.$Echarts.init(document.getElementById("ehart2"));
      let series = [];
      let length = datas.dataMsgs2.length;
      for (var i = 0; i < length; i++) {
        series.push({
          name: datas.dataMsgs2[i].name,
          type: "line",
          stack: "总量",
          time: datas.dataMsgs2[i].times,
          data: datas.dataMsgs2[i].levels
        });
      }
      console.log("mini-4", series);
      let option = {
        title: {
          text: "水位小时变化图（单位:CM）"
        },
        tooltip: {
          trigger: "item",
          // trigger: "axis",
          position: "bottom",
          textStyle: {
            align: "left"
          },

          formatter: function(params) {
            let station = {};
            option.series.forEach(item => {
              if (item.name == params.seriesName) {
                station = item;
                return;
              }
            });
            var res = "<div><p>" + params.seriesName + "</p></div>";

            res += "<div><p>当前水位:" + params.data + "CM</p></div>";
            res +=
              "<div><p>更新时间:" +
              station.time[params.dataIndex] +
              "</p><div>";
            return res;
          }
        },
        legend: {
          x: "300px",
          y: "0px",
          data: datas.Allnames2
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "3%",
          containLabel: true
        },

        //保持图片
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
          // splitLine: {
          //   show: false
          // },
          axisLine: {
            lineStyle: {
              color: "#DFE3E9", // x轴颜色
              width: 1 // 粗细
            }
          },
          axisLabel: {
            color: "#999999", // x轴刻度名称颜色
            interval: 0 //代表显示所有x轴标签显示
            // rotate: 45 //代表逆时针旋转45度
          }
        },

        yAxis: {
          type: "value",
          axisLabel: {
            // color: "#999999", // y轴刻度名称颜色
            formatter: function(value) {
              var value;
              if (value >= 1000) {
                value = value / 1000 + "K";
              } else if (value < 1000) {
                value = value;
              }
              return value;
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed"
            }
          },
          axisTick: {
            //y轴刻度线
            show: false
          },
          axisLine: {
            //y轴
            show: true
          }
        },
        series: series
      };
      myChart.setOption(option);
    },

    //查询
    getAddBook(type) {
      if (type === "day") {
        this.getList().then(res => {
          this.drawLine(res);
        });
      }
      if (type === "hour") {
        this.getList2().then(res => {
          this.drawLine2(res);
        });
      }
    },
    //清空
    empty(type) {
      if (type === "day") {
        this.search.daytime = getTimeSeconds(new Date()); // 日时间
        this.getList().then(res => {
          this.drawLine(res);
        });
      }

      if (type === "hour") {
        (this.search.hourtime = getTimeHourMinutes(new Date())), //时时间
          this.getList2().then(res => {
            this.drawLine2(res);
          });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.hourdata {
  .search {
    display: flex;
    margin: 10px;
    padding-top: 10px;
    .change_type {
      width: 230px;
      height: 36px;
      line-height: 36px;
      margin-right: 20px;
      display: flex;
      text-align: center;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 13px 0px rgba(102, 102, 102, 0.13);
      border-radius: 18px;
      font-size: 18px;
      .water_hour {
        width: 125px;
        height: 36px;
        display: inline-block;
        // background:rgba(78,114,200,1);
        border-radius: 18px;
        cursor: pointer;
      }
      .water_day {
        display: inline-block;
        cursor: pointer;
        width: 125px;
        height: 36px;
        border-radius: 18px;
      }
    }
    .time_name {
      height: 36px;
      font-size: 18px;
      line-height: 36px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
  }
  #ehart1 {
    margin-top: 22px;
  }
}
.cur {
  background: #4e72c8;
  color: #fff;
}
</style>
